<style lang="less">
    /*日历*/
    .calendar-container{
        width:100%;
        margin: 0px 0px 10px;
    }
    .calendar-title{
        width:100%;
        height:45px;
        color:#666;
        background-color:#F9F9F9;
    }
    .month_active{
        color: #52bce8;
        font-weight: bold;
    }
    .calendar-month{
        float:left;
        width:20%;
        height:45px;
        text-align:center;
        cursor:pointer;
        line-height:45px;
    }
    .calendar-year{
        float:left;
        width:20%;
        height:45px;
        text-align:center;
        cursor:pointer;
        line-height:45px;
    }
    .calendar-prevyear,
    .calendar-prevmonth,
    .calendar-nextyear,
    .calendar-nextmonth,.lyx_month{
        float:left;
        width:15%;
        height:45px;
        text-align:center;
        cursor:pointer;
        line-height:45px;
    }
    .calendar-week{
        width:100%;
        height:rpx(27);
        font: 400 12px/24px verdana;
        border-bottom: 1px solid #f2f2f2;
        border-top: 1px solid #f2f2f2;
        overflow: hidden;
    }
    .calendar-week .week{
        float:left;
        width:14.28%;
        height:rpx(27);
        color:#313131;
        background-color:#fff;
        text-align:center;
        line-height:rpx(27);
        cursor:pointer;
        font-family: "Microsoft YaHei",hei,Arial,"Lucida Grande",Verdana;
    }
    .calendar-content{
        padding-bottom:5px;
        width:100%;
        background-color:white;
    }
    .calendar-content >div{
        float:left;
        width:14.28%;
        height: 50px;
        line-height: 40px;
        padding: 5px 0px;
        /*background-color:#f2f5f9;*/
        color:#ccc;
        text-align:center;
        cursor:pointer;
    }
    .calendar-content .canChoose{
        /*background-color:#f2f5f9;*/
    }

    .calendar-content .canChoose div{
        width: 100%;
    }

    .calendar-content .canChooseYes{
        background-color:#f2f5f9;
        color: #000000;
        display: flex;
        flex-direction: column;
    }

    .calendar-content div.today{
        color:#09F;
    }
    .calendar-content .day {
        display: block;
        line-height: 20px;
    }
    .calendar-content .cld_price, .calendar .cld_green, .calendar .cld_yellow, .calendar .cld_red {
        display: block;
        font-size: 10px;
        line-height: 12px;
        text-align: center;
        white-space: nowrap;
    }

    .calendar-content .selected {
        background-color: #099fde;
        color: #fff;
    }

    /*选择用户*/
    .trip_actions_mod {
        background-color: #fff;
    }
    .trip_actions li {
        position: relative;
        padding: 12px 0;
        margin-left: 15px;
        overflow: hidden;
    }
    .trip_actions li:before {
        position: absolute;
        left: 0;
        content: '';
        width: 200%;
        height: 0;
        border-bottom: 1px solid #d4d4d4;
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -moz-transform: scale(0.5);
        transform: scale(0.5);
        bottom: 0;
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        -moz-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    .trip_actions li .type {
        float: left;
    }
    .trip_actions .type .trip_price {
        margin-left: 10px;
        color: #ff7d13;
    }
    .pkg_room_num {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -16px;
        width: 86px;
        height: 28px;
        line-height: 28px;
        color: #666;
        background-color: #FFF;
        text-align: center;
        border: 1px solid #e4e4e4;
        vertical-align: middle;
        margin-right: 6px;
        border-radius: 4px;
    }
    .pkg_room_num i:first-child {
        left: 0;
        color: #009ee4;
        font: 400 34px/24px Arial;
        border-right: 1px solid #e4e4e4;
        border-radius: 4px 0 0 4px;
    }
    .pkg_room_num i:last-child {
        right: 0;
        color: #009ee4;
        border-left: 1px solid #e4e4e4;
        border-radius: 0 4px 4px 0;
    }
    .pkg_room_num i {
        position: absolute;
        width: 27px;
        height: 28px;
        text-align: center;
        font: 400 26px/28px Arial;
        background: 0;
    }
    .pkg_room_num .list_num_dec ~ .list_num {
        color: #FFF;
        background-color: #009de3;
        border-color: #009de3;
    }
    .pkg_room_num .list_num {
        display: inline-block;
        width: 30px;
        height: 26px;
        line-height: 26px;
        font-size: 14px;
        vertical-align: top;
        white-space: nowrap;
        overflow: hidden;
    }
    .infant_box {
        line-height: 18px;
        padding: 0 15px 0 26px;
        position: relative;
        font-size: 12px;
    }
    .infant_box i {
        width: 15px;
        height: 15px;
        border: 1px solid #999;
        border-radius: 3px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .infant_box .age {
        margin-left: 5px;
        font-size: 12px;
        color: #999;
    }
    .infant_box .infant_tips {
        color: #999;
    }
    .infant_box .cur {
        border-color: #00a1db;
        background: #00a1db;
    }
    .infant_box .cur:after {
        content: "";
        width: 6px;
        height: 14px;
        position: absolute;
        left: 5px;
        top: -2px;
        border-top: 1px solid #fff;
        border-left: 1px solid #fff;
        z-index: 3;
        -webkit-transform: rotate(225deg);
        transform: rotate(225deg);
    }
    .hidden {
        display: none !important;
    }

    /*底部样式*/
    .mod_foot_acitons {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99;
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        white-space: nowrap;
        border-top: 1px solid #CCC;
        background-color: #f9f9f9;
        box-sizing: border-box;
    }
    .foot_order_info2 {
        line-height: 16px;
    }
    .foot_order_info {
        position: relative;
        z-index: 2;
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
        color: #ff7d13;
        white-space: nowrap;
        word-wrap: normal;
    }
    .foot_order_info2 .item {
        vertical-align: top;
    }
    .foot_order_info .item_col1 {
        padding-left: 15px;
    }
    .foot_order_info .item {
        display: table-cell;
        vertical-align: middle;
    }
    .foot_order_info .loading_ico, .mod_order_info .loading_ico {
        width: 25px;
        height: 25px;
        background-position: 0 0;
    }
    .loading_ico {
        width: 25px;
        height: 25px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 6px;
        -webkit-animation: forward_loading 1.58s linear infinite;
        -moz-animation: forward_loading 1.58s linear infinite;
        -ms-animation: forward_loading 1.58s linear infinite;
        animation: forward_loading 1.58s linear infinite;
        transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        background: url(https://pic.c-ctrip.com/h5/group_travel/loading_orange.png) 0 0;
        background-size: 25px 25px;
    }
    .foot_order_info2 .item_col2 {
        width: 85px;
    }
    .foot_order_info2 .item_col3 {
        width: 85px;
    }
    .mod_foot_acitons .btn_link4 {
        display: block;
        height: 48px;
        line-height: 30px;
        font-size: 16px;
        color: #333;
        text-align: center;
        border-left: 1px solid #DDD;
        background-color: #FFF;
    }
    .mod_foot_acitons .btn_link4 span, .mod_foot_acitons .btn_link5 span {
        display: block;
        min-width: 64px;
        width: 64px;
        font-size: 12px;
        line-height: 16px;
        text-align: left;
        margin: -4px auto 0;
    }
    .mod_foot_acitons .btn_link5 {
        line-height: 30px;
    }
    .mod_foot_acitons .btn_link, .mod_foot_acitons .btn_link2, .mod_foot_acitons .btn_link3, .mod_foot_acitons .btn_link5 {
        display: block;
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        text-align: center;
        color: #FFF;
        background-color: orangered;
        position: relative;
        top: -1px;
    }
    .pkg_room_num .num_invalid {
        background: 0;
        color: #d9d9d9 !important;
    }

    /*日历字体颜色*/
    .c_origen{
        color: #ff7d13;
    }
    .c_red{
        color: #ff6767;
    }
    .selected .c_origen{
        color: white;
    }
    .selected .c_red{
        color: white;
    }
    .clearfix:after{
        content:".";
        display:block;
        height:0;
        clear:both;
        overflow:hidden;
    }
    .clearfix{
        zoom:1;
    }
</style>
<template>
    <div class="calendar">
        <div class="calendar-container">
            <div class="calendar-title">
                <div class="calendar-year">2018</div>
                <div v-for="(item,index) in monthDataList.monthDataList"  :key="index">
                    <div :class="[lyx_month ,item.is_select? 'month_active' : '']" >{{item.month}}月</div>
                </div>

            </div>
            <div class="calendar-week">
                <div class="week">日</div>
                <div class="week">一</div>
                <div class="week">二</div>
                <div class="week">三</div>
                <div class="week">四</div>
                <div class="week">五</div>
                <div class="week">六</div>
            </div>
            <div class="calendar-content clearfix">
                <div v-for="(item,index) in monthDataList.dayDataList" :key="index">
                    <div :class="[canChoose,item.priceInfo.price ? 'canChooseYes':'']" @click="handleZanCalendarChange">
                        <div class="day">{{item.num ? item.num : ''}}</div>
                        <div :class="[cld_price,item.priceInfo.priceClass ? item.priceInfo.priceClass:'']" v-if="item.priceInfo">{{item.priceInfo.price}}</div>
                        <div :class="[cld_price ,item.remsInfo.remsClass ? item.remsInfo.remsClass:'']" v-if="item.remsInfo">{{item.remsInfo.rems}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  props: {
    options: {
      data: Object,
      dateTime: new Date(),
      callback: function (ret) {

      }
    },
    componentId: String
  },
  data () {
    return {
      monthDataList1: [
        {
          month: 5,
          year: 2018,
          is_select: false
        },
        {
          month: 7,
          year: 2018,
          is_select: false
        },
        {
          month: 6,
          year: 2018,
          is_select: true
        }
      ]
    }
  },
  methods: {
    handleZanCalendarChange (event) {
      //      event.componentId = this.componentId

      console.info('[zan:field:change]', event)

      //      return this.$emit('zanFieldChange', event)
    }

  },

  computed: {
    monthDataList () {
      let dateObj
      if (this.dateTime === '' || this.dateTime === undefined || this.dateTime === null) {
        dateObj = new Date()
      } else {
        dateObj = this.dateTime
      }
      // let year = this.getYear(dateObj)
      let month = this.getMonth(dateObj)

      let nowD = this.options.data
      // 组装后符合价格日历的数据
      let dataSource = this.dataToCalendarData(nowD)
      // ---组装月份的数据
      // 月份循环的数据
      let monthDataList = []
      for (let y = dateObj.getFullYear(); y < dateObj.getFullYear() + 2; y++) {
        dataSource[y].forEach(function (items, index, arr) {
          if (index > 0) {
            if (items.length > 0) {
              let num = index
              let select_class = num === month
              monthDataList.push({ is_select: select_class, year: y, month: num })
            }
          }
        })
      }

      // 获取本月1号的周值
      let fistWeek = this.getCurmonWeeknum(dateObj)
      // 本月总日数
      let monDaynum = this.getCurmonDaynum(dateObj)
      // 当前日期
      let nowDay = this.getDay(dateObj)

      let dayDataList = this.createMonthDataList(fistWeek, monDaynum, nowDay, nowDay, dataSource[dateObj.getFullYear()][month])

      return { monthDataList: monthDataList, dayDataList: dayDataList }
    },
    /**
* 组装价格日历数据
* @param sourceData
* @returns {Array|any[]}
*/
    dataToCalendarData (sourceData) {
      console.log('打印数据源')
      console.log(sourceData)
      let data = []
      let dateTime = new Date().getFullYear()
      for (let y = dateTime; y < dateTime + 2; y++) {
        data[y] = []
        for (let i = 1; i < 13; i++) {
          data[y][i] = []
        }
      }
      sourceData.forEach(function (item, index, arr) {
        let now = item.tour_date.split('-')
        console.log(now[0] + '---' + parseInt(now[1], 10) + '----' + parseInt(now[2], 10))
        data[now[0]][parseInt(now[1], 10)][parseInt(now[2], 10)] = {
          'dateTime': item.tour_date, // 后台的日期
          'info': item
        }
      })
      console.log('组装后的数据', data)
      return data
    },

    /**
*
* @param fistWeek 获取本月1号的周值
* @param monDaynum 本月总日数
* @param nowDay 月份的第几天
* @param now_day 初始化的时候的月份的第几天
* @param dataList 数据集合
*/
    createMonthDataList (fistWeek, monDaynum, nowDay, now_day, dataList) {
      console.log(fistWeek, monDaynum, nowDay, now_day, dataList)
      let data = []
      // 留空的数据
      for (let i = 1; i <= fistWeek; i++) {
        data.push({})
      }
      // 正常的数据
      for (let i = 1; i <= monDaynum; i++) {
        let LinSHiData = { is_select: false }
        try {
          if (this.isExitsVariable(dataList[i])) {
            console.log('============')
            if (i === now_day) {
              LinSHiData.is_select = true
            }
            LinSHiData.num = i
            if (dataList[i].info.num) {
              LinSHiData.priceInfo = { price: dataList[i].info.num, priceClass: 'c_origen' }// 价格
            }
            if (dataList[i].info.rems) {
              LinSHiData.remsInfo = { rems: dataList[i].info.rems, remsClass: 'c_red' }// 库存余数
            }
            /* 用户传递的信息，存入起来 */
            LinSHiData.item = JSON.stringify(dataList[i].info)
          } else {
            LinSHiData.num = i
          }
        } catch (e) {
          console.log(e)
          LinSHiData.num = i
        }
        console.log(LinSHiData)
        data.push(LinSHiData)
      }
      console.log('组装日历数据', data)
      return data
    },

    // 判断闰年
    isLeapYear (year) {
      if ((year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0)) {
        return true
      } else {
        return false
      }
    },

    // 得到当前年份
    getYear (dateObj) {
      return dateObj.getFullYear()
    },

    // 得到当前月份
    getMonth (dateObj) {
      let month = dateObj.getMonth()
      let monthData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      return monthData[month]
    },

    // 得到当前号数
    getDay (dateObj) {
      return dateObj.getDate()
    },

    // 得到周期数
    getWeek (dateObj) {
      let week = ['无', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天']
      let day = dateObj.getDay()
      return week[day]
    },

    // 获取本月总日数方法
    getCurmonDaynum (dateObj) {
      let year = dateObj.getFullYear()
      let month = dateObj.getMonth()
      let monthNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
      if (this.isLeapYear(year)) { // 闰年
        monthNum[1] = 29
      }
      return monthNum[month]
    },

    // 获取本月1号的周值
    getCurmonWeeknum (dateObj) {
      let year = dateObj.getFullYear()
      let month1 = dateObj.getMonth() + 1 // 0是12月
      if (month1 < 10) {
        month1 = '0' + month1
      }
      return new Date(year + '-' + month1 + '-01').getDay()
    },

    isExitsVariable (variableName) {
      try {
        if (typeof (variableName) === 'undefined') {
          // alert("value is undefined");
          return false
        } else {
          return true
        }
      } catch (e) {

      }
      return false
    }
  }
}
</script>
